<template>
  <div class="add">
    <div class="boxs">
      <h2>产品新增/编辑</h2>
      <ul>
        <li>
          产品名称:
          <input type="text" v-model="pname" />
        </li>
        <li>
          产品编号:
          <input type="text" v-model="id" :disabled="disabled == 1" />
        </li>
        <li>
          &nbsp;&nbsp; 成本价:
          <input type="text" v-model="price" />
        </li>
        <li>
          &nbsp;&nbsp;&nbsp;库存数:
          <input type="text" v-model="count" />
        </li>
        <li>
          &nbsp;&nbsp; 登记人:
          <input type="text" v-model="user" />
        </li>
      </ul>
      <button @click="pres">保存</button><button @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      pname: "",
      id: "",
      price: "",
      count: "",
      user: "",
      disabled: 0,
    };
  },
  methods: {
    ...mapMutations(["add", "numnot"]),
    pres() {
      if (
        (this.pname && this.id && this.price && this.count && this.user) !== ""
      ) {
        this.add({
          pname: this.pname,
          id: this.id,
          uptDate: new Date(),
          price: this.price,
          count: this.count,
          user: this.user,
          isShow: false,
        });
        this.$router.push({ path: "/home/products" });
        this.numnot();
      } else {
        alert("请输入内容");
      }
    },
    cancel() {
      this.$router.push({ path: "/home/products" });
      this.numnot();
    },
    a() {},
  },
  created() {
    if (this.$store.state.num != -1) {
      this.pname = this.$store.state.arr[this.$store.state.num].pname;
      this.id = this.$store.state.arr[this.$store.state.num].id;
      this.price = this.$store.state.arr[this.$store.state.num].price;
      this.count = this.$store.state.arr[this.$store.state.num].count;
      this.user = this.$store.state.arr[this.$store.state.num].user;
      this.disabled = 1;
    }
  },
};
</script>

<style lang="less" scoped>
.boxs {
  width: 400px;
  margin-left: 100px;
  text-align: center;

  ul {
    list-style: none;
    li {
      margin-top: 5px;
      input {
        outline: none;
      }
    }
  }
  button {
    width: 100px;
    height: 30px;
    margin-left: 20px;
  }
}
</style>